<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<!-- _login_page_ --><!--登录超时标记 勿删-->
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="${ctxStatic1}/webpage/static/fonts/iconic/css/material-design-iconic-font.min.css">
	<link rel="stylesheet" type="text/css" href="${ctxStatic1}/webpage/static/css/util.css">
	<link rel="stylesheet" type="text/css" href="${ctxStatic1}/webpage/static/css/main.css">
	<meta name="decorator" content="ani"/>
	<title>${fns:getConfig("productName")}</title>
	<style>
		:root {
			--primary-color: #00d8ff;
			--secondary-color: #0084ff;
			--dark-color: #0a192f;
			--light-color: #ccd6f6;
			--accent-color: #64ffda;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}

		body {
			background-color: var(--dark-color);
			color: var(--light-color);
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			overflow: hidden;
			position: relative;
		}

		/* 科技感背景元素 */
		.bg-elements {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			overflow: hidden;
		}

		.bg-elements div {
			position: absolute;
			border-radius: 50%;
			background: rgba(0, 216, 255, 0.1);
			filter: blur(60px);
		}

		.bg-elements div:nth-child(1) {
			width: 600px;
			height: 600px;
			top: -300px;
			left: -300px;
		}

		.bg-elements div:nth-child(2) {
			width: 500px;
			height: 500px;
			bottom: -250px;
			right: -250px;
		}

		/* 登录卡片 */
		.login-container {
			position: relative;
			z-index: 2;
			width: 420px;
			padding: 40px;
			background: rgba(10, 25, 47, 0.85);
			border-radius: 16px;
			box-shadow: 0 8px 32px rgba(0, 136, 255, 0.2);
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
			border: 1px solid rgba(100, 255, 218, 0.2);
			overflow: hidden;
		}

		.login-container::before {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: linear-gradient(
					to bottom right,
					transparent 0%,
					rgba(0, 216, 255, 0.1) 50%,
					transparent 100%
			);
			transform: rotate(30deg);
			z-index: -1;
		}

		.login-header {
			text-align: center;
			margin-bottom: 40px;
		}

		.login-logo {
			width: 80px;
			height: 80px;
			margin: 0 auto 20px;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 32px;
			box-shadow: 0 4px 20px rgba(0, 216, 255, 0.3);
		}

		.login-title {
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 10px;
			background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.login-subtitle {
			font-size: 14px;
			color: rgba(204, 214, 246, 0.7);
		}

		/* 输入框样式 */
		.input-group {
			position: relative;
			margin-bottom: 30px;
			width: 100%; /* 确保容器宽度与按钮一致 */
		}

		.input-group input {
			width: 100%;
			padding: 15px 20px 15px 50px;
			background: rgba(100, 255, 218, 0.05);
			border: 1px solid rgba(100, 255, 218, 0.2);
			border-radius: 8px;
			color: var(--light-color);
			font-size: 16px;
			transition: all 0.3s ease;
			box-sizing: border-box; /* 确保padding不影响总宽度 */
		}

		.input-group input:focus {
			outline: none;
			border-color: var(--accent-color);
			box-shadow: 0 0 0 2px rgba(100, 255, 218, 0.2);
			background: rgba(100, 255, 218, 0.1);
		}

		.input-group i {
			position: absolute;
			left: 20px;
			top: 50%;
			transform: translateY(-50%);
			color: var(--accent-color);
			font-size: 18px;
		}

		.input-label {
			position: absolute;
			left: 50px;
			top: 15px;
			color: rgba(204, 214, 246, 0.7);
			font-size: 16px;
			transition: all 0.3s ease;
			pointer-events: none;
		}

		.input-group input:focus + .input-label,
		.input-group input:not(:placeholder-shown) + .input-label {
			top: -10px;
			left: 20px;
			font-size: 12px;
			background: var(--dark-color);
			padding: 0 5px;
			color: var(--accent-color);
		}

		/* 登录按钮 */
		.login-btn {
			width: 100%;
			padding: 15px;
			box-sizing: border-box; /* 确保padding不影响总宽度 */
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			border: none;
			border-radius: 8px;
			color: white;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
			margin-top: 20px;
		}

		.login-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(0, 216, 255, 0.3);
		}

		.login-btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			transition: all 0.5s ease;
		}

		.login-btn:hover::before {
			left: 100%;
		}

		/* 响应式设计 */
		@media (max-width: 480px) {
			.login-container {
				padding: 40px;
				width: 420px;
				/* 其他样式保持不变 */
			}
		}
		/* 表单元素宽度设置 */
		.login-form {
			width: 100%;
		}
		/* 动画效果 */
		@keyframes float {
			0%, 100% {
				transform: translateY(0);
			}
			50% {
				transform: translateY(-10px);
			}
		}

		.login-logo {
			animation: float 3s ease-in-out infinite;
		}

	</style>
	<title>${fns:getConfig("productName")}</title>
	<script>
		if (window.top !== window.self) {
			window.top.location = window.location;
		}
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#loginForm").validate({
				messages: {
					username: {: "请填写用户名."},password: {: "请填写密码."}
				},
				errorLabelContainer: "#messageBox",
				errorPlacement: function(error, element) {
					error.appendTo($("#loginError").parent());
				}
			});
		});
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0){
			alert('未登录或登录超时。请重新登录，谢谢！');
			top.location = "${ctx}";
		}
	</script>

</head>


<body>
<!-- 科技感背景元素 -->
<div class="bg-elements">
	<div></div>
	<div></div>
</div>
<div class="login-container">
	<form id="loginForm" role="form" action="${ctx}/login" method="post" class="login-form">
		<div class="login-header">
			<div class="login-logo">

				<i class="fas fa-user-shield"></i>
			</div>
			<h1 class="login-title">${fns:getConfig("productName")}</h1>
		</div>

		<div class="input-group">
			<i class="fas fa-user"></i>
			<input type="text" id="username" name="username" placeholder=" " autocomplete="off">
			<label class="input-label">用户名</label>
		</div>

		<div class="input-group">
			<i class="fas fa-lock"></i>
			<input type="password" id="password" name="password" placeholder=" ">
			<label class="input-label">密码</label>
		</div>

		<button type="submit" class="login-btn" onclick="login()">
			<span>登 录</span>
		</button>
	</form>
</div>
<script src="${ctxStatic1}/webpage/static/js/main.js"></script>

<script>

	$(function () {
		if('${message}' != ''){
			top.layer.msg("${message}", {icon: "danger"});
			if('${message}'.startsWith("License")){
				var s = "<a style=\"color: red;margin-top: 2px;\" href=\"javascript:void(0)\" onclick=\"getMechine()\">获取机器码</a>";

				$("#yes_login").append(s);
			}
		}
	})

	$(document).on("keydown",function (event) {
		var e = event || window.event ||arguments.callee.caller.arguments[0];
		if(e && e.keyCode == 13){
			login();
		}
	});

	function login() {
		jp.loading("登录中...");
		// $("#loginForm").submit();
		jp.ajaxForm("#inputForm",function(data){
			if(data.success){
				// jp.success(data.msg);
				<%--jp.go("${ctx}/buzz/billystk/billYsfj");--%>
			}else{
				jp.error(data.msg);
				$("#inputForm").find("button:submit").button("reset");
			}
		});
	}

	/**
	 * 获取机器码
	 */
	function getMechine(){
		$.get('${ctx}/getMechine',function(result){
			if(result.success){
				prompt("机器码",result.msg);
			}else {
				jp.error(result.msg);
			}
		});
	}
</script>
</body>
</html>
